<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Fotos - Portifólio</title>

    <style type="text/css">
      body {margin:50px 0px; padding:0px; background-color: #000000;color: #ffffff;}
      #content {width:620px; margin:0px auto;}
      #desc {margin:10px; float:left; font-family: Arial, sans-serif; font-size: 12px;}
    </style>

    <!-- include CSS always before including js -->
    <link type="text/css" rel="stylesheet" href="${resource(dir:'skins/tn3', file:'tn3.css')}"></link>
    <!-- include jQuery library -->
    <script src="${resource(dir:'js', file:'jquery-1.7.1.min.js')}" type="text/javascript"></script>
    <!-- include tn3 plugin -->
    <script type="text/javascript" src="${resource(dir:'js', file:'jquery.tn3lite.min.js')}"></script>

    <!--  initialize the TN3 when the DOM is ready -->
    <script type="text/javascript">
              $(document).ready(function() {
                        //Thumbnailer.config.shaderOpacity = 1;
                        var tn1 = $('.mygallery').tn3({
                            skinDir:"skins",
                            imageClick:"fullscreen",
                            image:{
                            maxZoom:2,
                            crop:true,
                            clickEvent:"dblclick",
                            transitions:[{
                            type:"blinds"
                            },{
                            type:"grid"
                            },{
                            type:"grid",
                            duration:460,
                            easing:"easeInQuad",
                            gridX:1,
                            gridY:5,
                            width: 1000,
                            // flat, diagonal, circle, random
                            sort:"random",
                            sortReverse:false,
                            diagonalStart:"bl",
                            // fade, scale
                            method:"scale",
                            partDuration:360,
                            partEasing:"easeOutSine",
                            partDirection:"left"
                            }]
                            }
                        });
              });
    </script>
  </head>
  <body>
    <div id="content">
      <div class="mygallery">
        <div class="tn3 album">
          <div class="tn3 thumb">images/35x35/1.jpg</div>
          <ol>
            <g:each in="${listaImg}">
              <li>
                <a href="${createLink (controller: "portifolio", action: 'imgPortifolio', id:it.id)}">
                  <img src="${createLink (controller: "portifolio", action: 'imgPortifolio', id:it.id)}"/>
                </a>
              </li>
            </g:each>
          </ol>
        </div>
      </div>
    </div>
  </body>
</html>



